<template>
  <view class="uni-combox" :class="border ? '' : 'uni-combox__no-border'">
    <view class="uni-combox__input-box">
      <input
        :class="selectDesc ? 'uni-combox__input' : 'placeholder-class'"
        :placeholder="placeholder"
        v-model="selectDesc"
        @tap="handleMultiple"
      />
    </view>
    <!-- 下拉框多选 -->
    <view class="popup" v-show="showPopup">
      <view class="bg" @tap="cancelMultiple"></view>
      <view class="selectMultiple" :animation="animationData">
        <view class="multipleBody">
          <view class="title">
            <view class="close" @tap="cancelMultiple"> 取消 </view>
            <view class="name">
              {{ title }}
            </view>
            <view class="confirm" @tap="confirmMultiple"> 确认 </view>
          </view>
          <view class="list">
            <view class="mask mask-top"></view>
            <view class="mask mask-bottom"></view>
            <scroll-view class="diet-list" scroll-y="true">
              <view
                v-for="(item, index) in popItems"
                :class="['item', item.selected ? 'checked' : '']"
                @tap="onChange(index, item)"
              >
                <span>{{ item.label }}</span>
                <view class="icon" v-show="item.selected">
                  <icon type="success_no_circle" size="16" color="#2D8DFF" />
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
var popSelectKey = [];
export default {
  name: "multiple-picker",
  props: {
    border: {
      type: Boolean,
      default: true,
    },
    placeholder: {
      type: String,
      default: "",
    },
    // 标题
    title: {
      type: String,
      default: "请选择",
    },
    //数据列表
    columns: {
      type: Array,
      default: [
        {
          label: "选项1",
          desc: "",
          key: "10",
        },
        {
          label: "选项2",
          desc: "",
          key: "11",
        },
      ],
    },
    // #ifndef VUE3
    value: {
      type: Array,
      default: [],
    },
    // #endif
    // #ifdef VUE3
    modelValue: {
      type: Array,
      default: [],
    },
    // #endif
  },
  data() {
    return {
      valueSync: [],
      selectDesc: "",
      popItems: [],
      showPopup: false,
      animationData: {},
    };
  },
  watch: {
    showPopup(val) {
      if (val) {
        this.openMultiple();
      }
    },
    // #ifndef VUE3
    value(newVal) {
      this.valueSync = newVal;
    },
    // #endif
    // #ifdef VUE3
    modelValue(newVal) {
      this.valueSync = newVal;
    },
    // #endif
    valueSync(newVal) {
      let temp = [];
      this.columns.forEach((item, index) => {
        if (newVal.indexOf(item.key.toString()) >= 0) {
          temp.push(item.desc ? item.desc : item.label);
        }
      });

      this.selectDesc = temp.toString();
    },
  },
  created() {
    this.valueSync = this.value || this.modelValue;
  },
  methods: {
    handleMultiple() {
      this.showPopup = true;
    },
    getSelectDesc() {
      return this.selectDesc;
    },
    // 列点击事件
    onChange(index, item) {
      // 是否已选中
      if (popSelectKey.indexOf(item.key.toString()) >= 0) {
        this.popItems[index].selected = false;
      } else {
        this.popItems[index].selected = true;
      }

      // 筛选已勾选数据
      popSelectKey = [];
      this.popItems.forEach((col_item, col_index) => {
        if (col_item.selected) {
          popSelectKey.push(col_item.key.toString());
        }
      });
      this.$emit("change", popSelectKey);
    },
    // 弹出框开启触发事件
    openMultiple() {
      // 初始化列表数据,默认勾选数据
      popSelectKey = this.valueSync || [];
      this.columns.forEach((item, index) => {
        this.$set(item, "selected", false);
        if (popSelectKey.indexOf(item.key.toString()) >= 0) {
          item.selected = true;
        }
      });
      this.popItems = Object.assign([], this.columns);
      // 弹出动画
      this.openAnimation();
    },
    // 确认
    confirmMultiple() {
      // console.log(popSelectKey);

      this.valueSync = popSelectKey;
      this.showPopup = false;
      this._onChange();
      this.$emit("confirm", popSelectKey);
    },
    // 关闭/取消
    cancelMultiple() {
      this.showPopup = false;
      this.$emit("cancel");
    },
    // 展开动画
    openAnimation() {
      var animation = uni.createAnimation();
      animation.translate(0, 300).step({
        duration: 0,
      });
      this.animationData = animation.export();
      this.$nextTick(() => {
        animation.translate(0, 0).step({
          duration: 300,
          timingFunction: "ease",
        });
        this.animationData = animation.export();
      });
    },
    /**
     * 触发动态修改
     */
    _onChange() {
      this.$emit("input", this.valueSync);
      this.$emit("update:modelValue", this.valueSync);
      this.$emit("change", this.valueSync);
    },
  },
};
</script>

<style scoped lang="scss">
.uni-combox {
  font-size: 14px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 6px 10px;
  position: relative;
  flex-direction: row;
  align-items: center;
}
.uni-combox__input-box {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
}
.uni-combox__input {
  flex: 1;
  font-size: 14px;
  height: 22px;
  line-height: 22px;
}
.placeholder-class {
  flex: 1;
  color: #999;
  font-size: 12px;
}
.uni-combox__no-border {
  border: none;
}

.popup {
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: 99999;
  left: 0;
  bottom: 0;

  .bg {
    width: 100%;
    height: 100%;
    background-color: rgba(black, 0.5);
  }
}

.selectMultiple {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: white;

  .multipleBody {
    width: 100%;
    padding: 30rpx;
    box-sizing: border-box;
    padding-bottom: 40rpx;

    .title {
      font-size: 28rpx;
      display: flex;
      flex-direction: row;

      .close {
        width: 80rpx;
        opacity: 0.5;
      }

      .name {
        width: 530rpx;
        text-align: center;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }

      .confirm {
        width: 80rpx;
        text-align: right;
        color: #2d8dff;
      }
    }

    .list {
      width: 100%;
      padding-top: 10rpx;
      position: relative;

      .mask {
        width: 100%;
        height: 100rpx;
        position: absolute;
        left: 0;
        z-index: 2;
        pointer-events: none;
      }

      .diet-list {
        max-height: 500rpx;
      }

      .item {
        position: relative;
        width: 100%;
        line-height: 40rpx;
        border-bottom: 1px solid rgba($color: #000000, $alpha: 0.05);
        padding: 20rpx 0;
        font-size: 30rpx;
        box-sizing: border-box;
        text-align: center;

        span {
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          padding: 0 40rpx;
        }

        .icon {
          position: absolute;
          right: 10rpx;
          top: 50%;
          transform: translateY(-50%);
          height: 16px;
        }

        &.checked {
          color: #2d8dff;
        }

        &:last-child {
          border-bottom: none;
          margin-bottom: 10rpx;
        }

        &:first-child {
          margin-top: 10rpx;
        }
      }
    }
  }
}
</style>
